<!-- 有限空间作业 1-待审批 2-待执行 3-进行中 4-已完成-->
<template>
  <view class="page-view">
    <view class="top-bg">
      <u-sticky offset-top="50">
        <view class="return" @click="goToBack()">
          <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
        </view>
        有限空间作业
        <view class="tabs-wrap">
          <van-tabs color="#fff" :active="active" @change="onChange">
            <van-tab v-for="(tab,index) in statusList" :key="tab.value" :title="`${tab.name}(${tab.count})`"
              :name="index">
            </van-tab>
          </van-tabs>
        </view>
      </u-sticky>
      <view class="cardList">
        <view v-if="active === 2" class="header-wrap">
          <view class="selectName">
            <!-- {{numberText}}
            <image class="arrow" src="../../static/icon/icon-bottom-arrow.png" mode=""></image> -->
            <u-search shape="round" v-model="queryParams.workNo" bgColor="#f2f7f5" placeholderColor="#4a4a4a"
              height="53" @change="searchNoChange" style="pointer-events: none;font-size: 24rpx;" :searchIcon="none"
              placeholder="编号" :show-action="false">
            </u-search>
          </view>
          <view class="selectName" @click="openPicker('user')">
            <span class="userText">{{userText}}</span>
            <image class="arrow" src="../../static/icon/icon-bottom-arrow.png" mode=""></image>
            <image v-if="clearUserText" class="clearImg" src="@/static/login/clear.png" @click.stop="clearUser"></image>

          </view>
          <view class="item_search">
            <u-search shape="round" v-model="timeStr" bgColor="#f2f7f5" height="53" placeholderColor="#4a4a4a"
              style="pointer-events: none;font-size: 24rpx;" searchIcon="calendar" searchIconSize="26" placeholder="日期"
              :show-action="false" :disabled="true" @click="openPicker('date')">
            </u-search>
            <image v-if="clearsDateShow" class="clearImg" src="@/static/login/clear.png" @click.stop="onClearsDate">
            </image>
          </view>
        </view>
        <scroll-view style="height: calc(100vh - 300rpx);" scroll-y="true" class="scroll-Y"
          @scrolltolower="handleGetMore">
          <!-- <card-list :dataList="workDataList" :baseInfoList="baseInfoList">
          </card-list> -->
          <view class="cardItem" v-for="work in workDataList" :key="work.prop" @click="toDetail(JSON.stringify(work))">
            <view class="baseContent">
              <view class="workTitle">
                <span class="titleContent">
                  <span class="spot"></span>{{work.workArea}}
                </span>
                <!-- 1--高风险  2--一般风险 -->
                <span class="dangerLevelTag"
                  :class="work.riskLevel == 1 ? 'highDanger':'generalDanger'">{{work.riskLevel == 1 ? '高风险':'一般风险'}}</span>
              </view>
              <view class="rowItem" v-for="prop in baseInfoList" :key="prop.prop">
                <view class="label">{{ prop.label }}</view>
                <view class="value" v-if="prop.prop === 'planWorkDateBegin'">
                  {{work.planWorkDateBegin + '~' + work.planWorkDateEnd}}
                </view>
                <view class="value" v-else>
                  {{ work[prop.prop] || '暂无数据' }}
                </view>
              </view>
              <view v-if="work.status !== 1" class="rowItem">
                <view class="label">审批意见</view>
                <view class="value">
                  {{work.approvalComments}}
                  <!-- <u--textarea placeholder="请输入审批意见" v-model="work.approvalComments" height="100"></u--textarea> -->
                </view>
              </view>
            </view>
            <view v-if="work.status === 1" class="auditBtnContent">
              <view class="examineBtn" @click.stop="disallowed(JSON.stringify(work))">驳回</view>
              <view class="submitBtn" @click.stop="toAgree(JSON.stringify(work))">同意</view>
            </view>
          </view>
          <view class="cardItem" v-if="!workDataList.length">
            <van-empty description="暂无数据" />
          </view>
        </scroll-view>
      </view>
    </view>
    <audit-examine-dialog v-if="examineDialog" :examineDialog="examineDialog"></audit-examine-dialog>
    <!-- :operateAuditId="operateAuditId" -->
    <!-- <u-picker :show="numberShow" keyName="name" :columns="[columns1]" @confirm="bindPickerChange1"
      @cancel="numberShow=false"></u-picker> -->
    <u-picker :show="userOptionsShow" keyName="name" :columns="[operatorList]" @confirm="bindPickerChange2"
      @cancel="userOptionsShow=false"></u-picker>
    <van-calendar :show="dateShow" ref="calendar" color="rgba(39, 105, 247, 1)" :maxDate="maxDate" :minDate="minDate"
      :defaultDate="defaultDate" monthNum="24" rowHeight="55" title="选择时间" type="range" @confirm="dateConfirm"
      @close="dateClose">
    </van-calendar>
  </view>
</template>

<script>

import { getSpaceWorkList, getSpaceWorkCount, editSpaceWork } from '@/api/spaceWork.js';
import { getOperatorList } from '@/api/yunwei'
import CardList from './cardList.vue'
import AuditExamineDialog from './auditExamineDialog.vue'
export default {
  components: { CardList, AuditExamineDialog },
  data() {
    return {
      clearsDateShow: false,
      dateShow: false,
      clearUserText: false,
      maxDate: new Date().valueOf(),
      minDate: new Date('2024-01-01').getTime(),
      defaultDate: [],
      // numberShow: false,
      userOptionsShow: false,
      statusList: [
        {
          name: '待审批',
          value: '1',
          count: 0
        },
        {
          name: '已审批',
          value: '2',
          count: 0
        },
        {
          name: '全部',
          value: '',
          count: 0
        },
      ],
      columns1: [{
        name: '312298',
        value: ''
      },
      {
        name: '212121',
        value: '1'
      },
      {
        name: '32232',
        value: '2'
      },
      {
        name: '33232',
        value: '3'
      },],
      // columns2: [],
      // numberText: "编号",
      userText: "作业人员",
      // auditExamineText: "",
      examineDialog: false,
      active: 0,
      // operateAuditId: '',
      baseInfoList: [
        { label: '审批单编号', prop: 'workNo', unit: '户' },
        { label: '作业内容', prop: 'workDetail', unit: '户' },
        { label: '作业人员', prop: 'workContact' },
        { label: '计划作业日期', prop: 'planWorkDateBegin', unit: 'm' }, // planWorkDateBegin--起始, planWorkDateEnd--终止
        // { label: '审批意见', prop: 'approvalComments' }
      ],
      workDataList: [],
      baseInfoData: {
        paishuiHu: '',
        terminal: '',
        terminalName: '',
        pipLength: '',
        yunweiBusiness: '',
        villagePic: [],
      },
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        status: 1,
        workNo: '',
        siteWorker: '',
        planWorkDateEnd: '',
        planWorkDateBegin: ''
      },
      timeStr: '',
      operatorList: []
    }
  },
  onLoad(query) {
    console.log(query, 'query')
    const _this = this
    // uni.$on('examineOpen', (examineQuery) => {
    //   const { id, examineDialog } = examineQuery
    //   console.log(examineDialog, id, examineQuery, '审核驳回打开')
    //   this.operateAuditId = id
    //   // setTimeout(() => {
    //   _this.examineDialog = examineDialog
    //   // }, 1500)
    // })
    uni.$on('auditExamine', (approvalComments) => {
      // const { approvalComments } = query
      if (approvalComments) {
        console.log(approvalComments, '收到驳回原因！！')
        this.editSpaceWork(4, approvalComments)
      } else {
        uni.showToast({
          title: '请输入驳回理由',
          icon: 'error',
        });
      }
    })
    uni.$on('examinDialog', (examineDialog) => {
      console.log(examineDialog, '审核驳回关闭')
      _this.examineDialog = examineDialog
    })
  },
  onShow() {
    this.workDataList = []
    this.queryParams.pageNo = 1
    this.total = 0
    this.getSpaceWorkList()
    this.getOperatorList()
  },
  methods: {
    // 获取运维人员列表
    getOperatorList() {
      getOperatorList({ pageNo: 1, pageSize: 50 }).then(res => {
        console.log(res, 'res--获取运维人员列表')
        this.operatorList = res.data.result.records.map(peo => {
          return { name: peo.operatorName, value: peo.id }
        })
      })
    },
    searchNoChange(e) {
      console.log(e, 'eeeee-搜索编号查询')
      this.workDataList = []
      this.queryParams.pageNo = 1
      this.total = 0
      this.queryParams.workNo = e
      this.getSpaceWorkList()
    },
    disallowed(work) {
      this.dailyData = JSON.parse(work)
      console.log(work, '审核驳回！！！数据')
      this.examineDialog = true
    },
    async editSpaceWork(status, approvalComments) {
      const res = await editSpaceWork({
        id: this.dailyData.id,
        status,
        isReject: status == 4 ? 1 : 0, // 驳回时传1
        approvalComments
      })
      if (res.data.code == 200) {
        uni.showToast({
          title: res.message
        })
        this.workDataList = []
        this.queryParams.pageNo = 1
        this.total = 0
        this.getSpaceWorkList()
        this.dailyData = {}
        // uni.navigateTo({
        //   url: '/subpack_YunWei/yxkjzy/index'
        // })
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'none'
        })
      }
    },
    toDetail(item) {
      // console.log(item, 'item')
      const { id } = JSON.parse(item)
      this.$tab.navigateTo(`/subpack_Manage/workAudit/detail?id=${id}`)
    },
    async getSpaceWorkList() {
      const res = await getSpaceWorkList({
        ...this.queryParams
      })
      if (res.data.result) {
        // this.workDataList = res.data.result.records
        this.workDataList = this.workDataList.concat(res.data.result.records)
        this.total = res.data.result.total
        this.getSpaceWorkCount()
      } else {
        this.workDataList = []
        this.queryParams.pageNo = 1
        this.total = 0
      }
      console.log(res.data);
    },
    async getSpaceWorkCount() {
      const res = await getSpaceWorkCount()
      let countData = res.data.result
      this.statusList[0].count = countData.one
      this.statusList[1].count = countData.total - countData.one
      this.statusList[2].count = countData.total
      // this.statusList[3].count = countData.three
      // this.statusList[4].count = countData.four
      console.log(res.data);
    },
    dateConfirm(e) {
      console.log(e, 'eeee-日期选择')
      this.queryParams.planWorkDateBegin = new Date(e.detail[0]).format('yyyy-MM-dd') + " 00:00:00"
      this.queryParams.planWorkDateEnd = new Date(e.detail[e.detail.length - 1]).format('yyyy-MM-dd') + " 23:59:59"
      this.defaultDate = [this.queryParams.planWorkDateBegin, this.queryParams.planWorkDateEnd]

      this.workDataList = []
      this.queryParams.pageNo = 1
      this.total = 0
      this.timeStr = new Date(e.detail[0]).format('yyyy/MM/dd') + '~' + new Date(e.detail[e.detail.length - 1]).format('yyyy/MM/dd')
      this.getSpaceWorkList()
      // this.timeStr = this.startTime + '~' + this.endTime
      this.clearsDateShow = true
      this.dateShow = false
    },
    dateClose() {
      this.dateShow = false
    },
    // bindPickerChange1() { },
    bindPickerChange2(e) {
      console.log(e, 'eeeee--查询工作人员')
      const peoObj = e.value.length ? e.value[0] : {}
      this.queryParams.siteWorker = peoObj.name
      this.userText = peoObj.name
      this.workDataList = []
      this.queryParams.pageNo = 1
      this.total = 0
      this.getSpaceWorkList()
      this.userOptionsShow = false
      this.clearUserText = true
    },
    clearUser() {
      this.queryParams.siteWorker = ""
      this.userText = "工作人员"
      this.workDataList = []
      this.queryParams.pageNo = 1
      this.total = 0
      this.getSpaceWorkList()
      this.clearUserText = false
    },
    onClearsDate() {
      this.queryParams.planWorkDateBegin = ""
      this.queryParams.planWorkDateEnd = ""
      this.defaultDate = []
      this.timeStr = ""
      this.clearsDateShow = false
      this.workDataList = []
      this.queryParams.pageNo = 1
      this.total = 0
      this.getSpaceWorkList()
    },
    /**
     * type -- 
     *  'user' -- 作业人员
     *  'No.' -- 编号
     */
    openPicker(type) {
      if (type == 'No.') {
        this.numberShow = true
      } else if (type == 'user') {
        this.userOptionsShow = true
      } else if (type == 'date') {
        this.dateShow = true
      }
    },
    // 审核通过
    toAgree(work) {
      this.dailyData = JSON.parse(work)
      console.log(this.dailyData, '点击数据！---同意审核')
      const { id } = JSON.parse(work)
      console.log(id, 'id')
      this.$modal.confirm('确认同意？', '提示').then(res => {
        this.approvalComments = "同意"
        this.editSpaceWork(2, '同意')
        console.log('确认审批通过！', id, this.approvalComments)
      })
    },
    // onClose() {
    //   this.examineDialog = false
    //   this.auditExamineText = ''
    // },
    handleGetMore() {
      console.log('触底')
      this.queryParams.pageNo++;
      if (this.total && this.workDataList.length >= this.total) {
        return;
      }
      this.getSpaceWorkList()
    },
    // 预览图片
    previewPic(pic) {
      uni.previewImage({
        current: pic,
        urls: this.baseInfoData.aerialPhoto.split(',')
      })
    },
    onChange(e) {
      this.active = e.detail.name
      if (this.active == 1) {
        this.queryParams.approval = 1
        this.queryParams.status = ""
      } else {
        this.queryParams.status = this.statusList[this.active].value
        this.queryParams.approval = ""
      }
      console.log(e, e.detail, this.queryParams, 'change')
      this.workDataList = []
      this.queryParams.pageNo = 1
      this.total = 0
      this.getSpaceWorkList()
    },
    goToBack() {
      this.$tab.navigateBack()
    },
  }
}
</script>

<style lang="scss" scoped>
.page-view {
  .cardList {
    overflow: auto;
    height: calc(100vh - 300rpx);
    .header-wrap {
      // position: relative;
      padding: 0 32rpx;
      margin-top: 32rpx;
      display: flex;
      align-items: center;
      color: #fff;
      margin-bottom: 32rpx;
      font-weight: bold;
      font-size: 28rpx;
      margin-left: 8rpx;
      letter-spacing: 1rpx;
      .item_search {
        font-weight: 400;
        font-size: 24rpx;
        color: #4a4a4a;
        width: 56%;
        position: relative;
        .clearImg {
          position: absolute;
          width: 25rpx;
          height: 25rpx;
          right: 8rpx;
          bottom: 16rpx;
        }
        ::v-deep .u-search__content__input {
          font-size: 24rpx;
        }
      }
      .selectName {
        width: 160rpx;
        height: 56rpx;
        padding: 0 10rpx;
        line-height: 56rpx;
        background: #f2f6f7;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #4a4a4a;
        margin-right: 8rpx;
        overflow: hidden;
        position: relative;
        text-align: left;
        .arrow {
          width: 16rpx;
          height: 10rpx;
          vertical-align: middle;
          margin-left: 15rpx;
          position: absolute;
          right: 15rpx;
          top: 26rpx;
        }
        .clearImg {
          position: absolute;
          width: 25rpx;
          height: 25rpx;
          right: 35rpx;
          top: 15rpx;
        }
        .userText {
          margin-left: 12rpx;
        }
        ::v-deep .u-search__content__input {
          font-size: 24rpx;
        }
        ::v-deep .u-search__content {
          padding: 0;
        }
      }
      .dataPickerInput {
        // width: calc(100% - 48rpx);
        // height: 88rpx;
        background: #fff;
        color: #4a4a4a;
        // padding-left: 24rpx;
        padding-right: 10rpx;
        text-align: left;
        font-size: 24rpx;
        // line-height: 88rpx;
        // border-radius: 10rpx;
        display: flex;
        justify-content: space-between;
        white-space: nowrap;
        align-items: center;
        line-height: 56rpx;
        height: 56rpx;
        position: relative;
        .arrow {
          width: 16rpx;
          height: 10rpx;
          vertical-align: middle;
          margin-left: 0;
          position: absolute;
          right: 10rpx;
        }
      }
    }
  }
}
.top-bg {
  letter-spacing: 0 !important;
  width: 100%;
  height: 330rpx;
  background: #2769f7;
  border-radius: 0rpx 0rpx 140rpx 140rpx;
  padding-top: 104rpx;
  text-align: center;
  font-weight: 600;
  font-size: 40rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  position: relative;
  .return {
    position: absolute;
    left: 32rpx;
    margin-top: 8rpx;
  }

  .tabs-wrap {
    --font-weight-bold: 700;
    padding: 0 32rpx;
    ::v-deep .van-tab {
      font-weight: 700;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
      flex: none;
      padding: 0 20rpx;
    }
    ::v-deep .van-tab--active {
      font-size: 32rpx;
      color: rgba(255, 255, 255, 1);
    }
    ::v-deep .van-tabs__line {
      width: 60rpx !important;
    }
  }
  .baseContent {
    padding: 32rpx;
  }
  .cardItem {
    background: #fff;
    border-radius: 6rpx;
    color: #000;
    margin: 32rpx;
    .workTitle {
      display: flex;
      justify-content: space-between;
      margin-bottom: 42rpx;
      .titleContent {
        flex: 1;
        white-space: wrap;
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 28rpx;
        color: #4a4a4a;
        text-align: left;
      }
      .spot {
        display: inline-block;
        width: 8rpx;
        height: 20rpx;
        background: #2769f7;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        opacity: 0.6;
        margin-right: 8rpx;
      }
      .dangerLevelTag {
        display: inline-block;
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 20rpx;
        line-height: 40rpx;
        white-space: nowrap;
        padding: 6rpx 19rpx;
        border-radius: 6rpx;
      }
      .highDanger {
        color: #ff0200;
        background: #ffebef;
      }
      .generalDanger {
        color: #fc8382;
        background: #ffebef;
      }
    }
    .rowItem {
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      line-height: 40rpx;
      margin-bottom: 16rpx;
      .label {
        color: #989898;
        font-weight: bold;
        font-size: 24rpx;
        line-height: 34rpx;
      }
      .value {
        width: calc(100% - 180rpx);
        text-align: left;
        font-size: 24rpx;
        color: #4a4a4a;
      }
    }
    .auditBtnContent {
      height: 76rpx;
      width: 100%;
      display: flex;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      .examineBtn {
        flex: 1;
        text-align: center;
        line-height: 76rpx;
        background: #e6eeff;
        color: #2769f7;
        border-radius: 0rpx 0rpx 0rpx 10rpx;
      }
      .submitBtn {
        flex: 1;
        text-align: center;
        line-height: 76rpx;
        background: #2769f7;
        color: #fff;
        border-radius: 0rpx 0rpx 10rpx 0rpx;
      }
    }
  }

  ::v-deep .van-tabs__scroll {
    background: transparent;
  }
  ::v-deep .van-tab {
    color: #fff;
  }
}
::v-deep .u-textarea {
  // width: 80%;
  // border: 1rpx solid #efefef;

  background-color: #f2f6f7 !important;
  border-radius: 10rpx;
  font-size: 24rpx !important;
  // margin-left: 28rpx;
  .u-textarea__field {
    font-size: 24rpx !important;
  }
}
</style>